import React, { Component, Fragment } from 'react';

import { getAddressNameByCode } from '@/utils/utils';

import {
  Card,
  Row,
  Col,
  Descriptions,
  Radio,
  Badge,
} from 'antd';
import { FileImageOutlined } from '@ant-design/icons';

const { Item } = Descriptions;

interface JoinContractProps {
  detailInfos: any;
}

interface JoinContractState {
  franchiseeContractDetail: any;
}

class JoinContract extends Component<JoinContractProps, JoinContractState> {
  state: JoinContractState = {
    franchiseeContractDetail: {},
  }

  static getDerivedStateFromProps(nextProps: JoinContractProps, preState: JoinContractState) {
    const { detailInfos } = nextProps;
    const { franchiseeContractDetail } = preState;
    if (detailInfos !== franchiseeContractDetail) {
      return {
        franchiseeContractDetail: detailInfos,
      };
    }
    return null;
  }

  renderBasicInfoElem = (detail: any) => {
    const exclusive = ['非独家', '独家'];

    return (
      <Card
        title="基本信息"
        bordered={false}
        className="paddingB10"
      >
        <Descriptions bordered size="small">
          <Item label="所属商户">{detail.party_b_name}</Item>
          <Item label="合同类型">加盟合同</Item>
          <Item label="加盟性质">
            <Radio.Group value={detail.is_exclusive} disabled>
              <Radio value={detail.is_exclusive}>
                {exclusive[detail.is_exclusive]}
              </Radio>
            </Radio.Group>
          </Item>
          <Item label="合同主体">{detail.party_a_name}</Item>
          <Item label="乙方名称">{detail.party_b_name}</Item>
          <Item label="合同编号">{detail.contract_num}</Item>
          <Item label="合同周期">{detail.start_time}</Item>
          <Item label="　联系人">{detail.party_b_contact}</Item>
          <Item label="联系电话">{detail.party_b_phone}</Item>
          <Item label="加盟区域">
            {detail.franchise_region && detail.franchise_region.indexOf('#') >= 0
              && getAddressNameByCode({
                pareaCode: detail.franchise_region.split('#')[0],
                caredCode: detail.franchise_region.split('#')[1],
                dareaCode: detail.franchise_region.split('#')[2],
              })
            }
          </Item>
          <Item label="乙方住所">{detail.party_b_address}</Item>
          <Item label="查看合同">
            <a href={detail.file_link} target="_Blank" rel="noopener noreferrer">
              <FileImageOutlined style={{ fontSize: 16 }} />
              点击预览合同
            </a>
          </Item>
        </Descriptions>
      </Card>
    );
  }

  renderHardwareProductElem = (franchiseeContractDetail: any) => {
    const { reserve_list } = franchiseeContractDetail;

    return (
      <Card
        title="硬件产品交付约定"
        bordered={false}
        className="paddingB4"
      >
        <Row gutter={16}>
          {
            reserve_list && reserve_list.map((item: any, index: any) => (
              <Fragment key={item.batch_num}>
                <Col md={8} sm={24}>
                  <div
                    className="dottedBox marginB24"
                    style={{ display: 'flex' }}
                  >
                    <div style={{ marginRight: '16px' }}>
                      <Badge
                        count={index + 1}
                        style={{
                          backgroundColor: 'rgba(0,0,0,0.09)',
                          color: '#000',
                        }}
                      />
                    </div>
                    <Card
                      size="small"
                      bordered={false}
                      style={{ backgroundColor: '#FAFAFA', flex: '1' }}
                    >
                      <Descriptions column={1}>
                        <Item label="订购批次">{item.batch_num}</Item>
                        <Item label="时间（天）">{item.time}</Item>
                        <Item label="柜体格口数">{item.amount}</Item>
                        <Item label="备注说明">{item.remark || '--'}</Item>
                      </Descriptions>
                    </Card>
                  </div>
                </Col>
              </Fragment>
            ))
          }
        </Row>
      </Card>
    );
  }

  renderAccountInfoElem = (detail: any) => {
    const accountType = ['银行卡', '支付宝', '微信'];

    return (
      <Card
        title="账户信息"
        bordered={false}
        className="paddingB10"
      >
        <Row gutter={{ md: 8, xl: 48, lg: 48 }}>
          {['a', 'b'].map((item:any) => (
            <Col md={8} sm={24} key={item}>
              <div className="dottedBox" style={{ paddingBottom: 16 }}>

                <div className="subtitle marginB16">
                  {item === 'a' ? '甲方账户信息' : '乙方账户信息'}
                </div>

                <Descriptions column={1}>
                  <Item label="账户类型">{accountType[detail[`party_${item}_acc_type`] - 1]}</Item>
                  {detail[`party_${item}_acc_type`] === 1 && (
                    <Item label="　开户行">{detail[`party_${item}_acc_bank`]}</Item>
                  )}
                  <Item label="账户名称">{detail[`party_${item}_acc_name`]}</Item>
                  <Item label="账户账号">{detail[`party_${item}_acc_num`]}</Item>
                </Descriptions>

              </div>
            </Col>
          ))}
        </Row>
      </Card>
    );
  }

  renderSettlementElem = (detail: any) => {
    let modalText = '';
    const { service_fee_type, settle_type, settle_date } = detail;

    if (service_fee_type === 2) {
      modalText = '充值类型';
    } else if (service_fee_type === 1 && settle_type === 1) {
      modalText = '非充值类型1';
    } else if (service_fee_type === 1 && settle_type === 2) {
      modalText = '非充值类型2';
    } else {
      modalText = '非充值类型3';
    }

    return (
      <Card title="结算信息" bordered={false}>
        <Row>
          <Col lg={6} md={16} sm={24}>
            <Descriptions column={1} className="marginB16">
              <Item label="结算日期">每月 {settle_date} 日</Item>
            </Descriptions>
          </Col>
        </Row>
        <Row gutter={{ md: 8, xl: 48, lg: 48 }}>
          <Col md={12} sm={24}>
            <div className="dottedBox">
              <div className="subtitle marginB20">
                服务费抽成
                <Radio.Group
                  value={detail.is_exclusive}
                  disabled
                  style={{ marginLeft: 12 }}
                >
                  <Radio value={detail.is_exclusive}>{modalText}</Radio>
                </Radio.Group>
              </div>
              <Descriptions column={1}>
                {service_fee_type === 2 && (
                  <Fragment>
                    <Item label="派件平台服务费/件">{detail.delivery_service_fee / 100}元</Item>
                    <Item label="揽件平台服务费/件">{detail.sending_service_fee / 100}元</Item>
                    <Item label="寄存平台服务费/件">{detail.deposit_service_fee / 100}元</Item>
                  </Fragment>
                )}

                {service_fee_type === 1 && settle_type === 1 && (
                  <Item label="固定费用">{detail.settle_amount / 100}元</Item>
                )}
                {service_fee_type === 1 && settle_type === 2 && (
                  <Item label="总收入百分比">{detail.settle_amount}%</Item>
                )}
                {service_fee_type === 1 && settle_type === 3 && (
                  <Item label="按件收费">{detail.settle_amount / 100}元</Item>
                )}
              </Descriptions>
              {service_fee_type === 2 && (
                <div>
                  <div className="subtitle marginB20 marginT24">增值服务费</div>
                  <Descriptions column={1}>
                    <Item label="短信服务费（￥）/条">{detail.sms_service_fee / 100}元</Item>
                  </Descriptions>
                  <div className="subtitle marginB20 marginT24">提现手续费</div>
                  <Descriptions column={1}>
                    <Item>
                      <Radio.Group value={detail.is_exclusive} disabled>
                        <Radio value={detail.is_exclusive}>支付宝</Radio>
                      </Radio.Group>
                    </Item>
                    <Item label="提现手续费比例">{detail.withdraw_charge_ratio}‰</Item>
                  </Descriptions>
                </div>
              )}
            </div>
          </Col>
          <Col md={12} sm={24}>
            <div className="dottedBox">
              <div className="subtitle marginB20">业务项目营收</div>
              <Descriptions column={1}>
                <Item label="揽件分润比例">{detail.send_income_ratio}%</Item>
              </Descriptions>
            </div>
            <div className="dottedBox" style={{ marginTop: '40px' }}>
              <div className="subtitle marginB20">取件订单延期收费抽成</div>
              <Descriptions column={1}>
                <Item label="延期费抽成比例">{((detail.delivery_delay_fee_ratio || 0) / 100).toFixed(2)}%</Item>
              </Descriptions>
            </div>
          </Col>
        </Row>
      </Card>
    );
  }

  render() {
    const { franchiseeContractDetail }: any = this.state;

    return (
      <Fragment>
        {this.renderBasicInfoElem(franchiseeContractDetail)}
        {Boolean(franchiseeContractDetail.is_exclusive) && (
          this.renderHardwareProductElem(franchiseeContractDetail)
        )}
        {this.renderAccountInfoElem(franchiseeContractDetail)}
        {this.renderSettlementElem(franchiseeContractDetail)}
      </Fragment>
    );
  }
}

export default JoinContract;
